.black {
    background-color: black;
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page>* {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 700;
    color: #9A9DAA;
    font-style: normal;
    text-transform: none;
}

.openPage {
    background: #D8D8D8;
    border: none;
    color: #676F7B;
}

.page {
    background-color: black;
    overflow: auto;
    box-sizing: border-box;

    .page-parmary-img {
        position: absolute;
        top: 0;
        left: 0;
        height: 0.9rem;
        width: 12rem;
    }

    .page-parmary {
        height: 4rem;
        background: linear-gradient(90deg, #1D2435 0%, #2C334C 100%);
        display: flex;
        justify-content: space-between;
        padding-left: 0.75rem;
        font-size: 1.75rem;
        overflow: hidden;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 400;
        color: #E7E7E7;
    }

    .page-title-right {
        line-height: 4rem;
        font-size: 1.25rem;
        white-space: nowrap;
        display: flex;
        justify-content: flex-end;
    }

    .page-title-img {
        width: 1.75rem;
        height: 1.75rem;
        margin-right: 0.5rem;
        vertical-align: text-bottom;
    }

    .page-parmary-item {
        flex: 1;
        text-align: center;
    }

    .sw-from {
        display: flex;
        margin-top: 0.4rem;
        height: 3.25rem;
        background-color: black;
        border-radius: 0.45rem;
        padding: 0.4rem 0.5rem 0.45rem 1rem;
    }

    .el-form-item {
        margin-bottom: 0;
        margin-right: 0.5rem;
        width: 0.3rem;
    }

    .el-form-item__label {
        height: 0.74rem;
        font-size: 0.6rem;
        line-height: 0.74rem;
        padding: 0;
        text-align: center;
        width: 100%;
        float: left;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 700;
        color: #9A9DAA;
        font-style: normal;
        text-transform: none;
    }

    .el-input__inner {
        background: #394760;
        border-radius: 3rem;
        border: none;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 10.4rem;
        color: #EDEDED;
        font-style: normal;
        text-transform: none;
    }

    .el-form-item__error {
        top: 2.25rem;
    }

    .run-bottom {
        border-radius: 100%;
        height: 40.4rem;
        width: 40.4rem;
        line-height: 2.2rem;
        text-align: center;
        color: #FFFFFFFF;
        font-size: 10.4rem;
        margin-right: 0.5rem;
    }

    .socket-status {
        font-size: 0.74rem;
        width: 5rem;
        margin: 0 0.5rem;
        line-height: 2.35rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .socket-status-img {
        width: 1.25rem;
        height: 1.25rem;
        vertical-align: middle;
    }

}

.page-time-img {
    width: 2.1rem;
    vertical-align: middle;
}

.page-dom-title-img {
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: middle;
}

.page-time-node {
    margin-right: 4rem;
}

.bottom-img {
    height: 0.74rem;
    width: 0.74rem;
    vertical-align: bottom;
    margin-right: 0.1rem;
}

.full-bottom {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(132deg, #2C334C 0%, #1D2435 100%);
    line-height: 4rem;
    cursor: pointer;
}

.full-bottom:hover {
    background-color: #415076;
}

.chart-demo {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #415076;
}

.back {
    background-color: #313B53;
}

.flex-column {
    /* display: flex; */
    display: -webkit-box;
    flex-direction: column;
}

.flex {
    display: flex;
}

.width100 {
    width: 100%;
}

.height100 {
    height: 100%;
}

.flex1 {
    flex: 1;
}

.flex2 {
    flex: 2;
}

.flex3 {
    flex: 3;
}

.flex4 {
    flex: 4;
}

.flex12 {
    flex: 12;
}

.chart {
    border: 0.05rem solid #EDEDED;
    box-sizing: border-box;
}

.chart3D {
    height: 100%;
}

.chart3D-right-table {
    height: 100%;
}

.chart-item {
    flex: 1;
    background-color: #313A53;
}

.chart-item-title {
    position: relative;
}

.chart-item-bottom-group {
    position: absolute;
    right: 0;
    top: 0;
}

.chart-item-bottom:hover {
    color: aqua;
}

.chart-all-page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
}

.chart-all-min-page {
    width: 40.4rem;
}

.chart-all-min-bottom {
    width: 100%;
    background-color: #1A2035;
    box-sizing: border-box;
    font-size: 10.4rem;
    writing-mode: vertical-rl;
    white-space: nowrap;
}

.chart-all-min-bottom {
    padding: 10.05rem 0.3rem;
}

.chart-all-min-bottom-group {
    width: 100%;
}

.chart-all-min-bottom-full {
    font-size: 1.25rem;
    color: aqua;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.chart-all-min-bottom-name {
    padding: 0 0.3rem;
}

.radar-input {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
    overflow: hidden;
}

/* 取消视频播放器的进度条 */
video::-webkit-media-controls-timeline {
    display: none;
}

.sw-room-num {
    font-size: 0.7rem;
    font-weight: 400;
    color: #2BA0C8;
    white-space: nowrap;
}

.sensor-img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.1rem;
    vertical-align: text-top;
}

.mast-img {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.1rem;
    vertical-align: sub;
}

.sensor-item {
    width: 50%;
    float: left;
    overflow: hidden;
    font-size: 0.7rem;
    color: #25CAD5;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 400;
}

.mast-item {
    white-space: nowrap;
    overflow: hidden;
    margin: 0.15rem 0.55rem;
    padding: 0.5rem;
    background-color: #3A4156;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
    display: flex;
}

.compass-img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    vertical-align: bottom;
}

.compass-item {
    background: linear-gradient(132deg, #2C334C 0%, #1D2435 100%);
    border-radius: 0.25rem;
    height: 1.5rem;
    top: 0.4rem;
    line-height: 1.5rem;
    margin-left: 0.2rem;
    padding: 0 0.8rem 0 0.2rem;
    width: 5rem;
    overflow: hidden;
}

.room-item {
    position: relative;
    background-color: #0007244a;
    width: 14.9rem;
    height: 100%;
}

.room-title-img {
    width: 2.1rem;
    height: 1.5rem;
    margin-right: 0.6rem;
}

.room-title {
    background-color: #394760;
    height: 3.2rem;
    display: flex;
    padding: 0.7rem;
}

.room-title-name-sw {
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-tag-item {
    border-radius: 0.4rem;
    overflow: hidden;
}

.radio-tag-title {
    background-color: #0DC9D0;
    display: flex;
    justify-content: space-between;
    padding: 0 0.1rem;
    color: white;
    font-weight: 400;
    padding: 0.2rem 0.45rem;
    line-height: 1.5rem;
}

.radio-tag-title-name {
    display: flex;
    height: 2.2rem;
}

.radio-tag-title-img {
    width: 0.75rem;
    height: 1.25rem;
    margin-right: 0.2rem;
}

.room-color {
    color: #2BA0C8;
    font-size: 0.8rem;
    padding: 0.1rem;
}

.radio-tag-content {
    top: 2rem;
    background-color: #121212;
    width: 100%;
    margin-top: -0.8rem;
    border-radius: 0.4rem;
}

.radio-tag-mast {
    background: linear-gradient(132deg, #2C334C 0%, #1D2435 100%);
    border: 0.05rem solid #2CA6E0;
    border-radius: 0.25rem;
    height: 1.8rem;
    padding: 0 0.05rem 0 0.35rem;
    font-size: 0.8rem;
    line-height: 1.8rem;
    display: flex;
    justify-content: space-between;
    font-weight: 400;
}

.radio-tag-mast-img {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.2rem;
}

.mast-img {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.2rem;
}